<template>
	<view class="gallery-detail">
		<u-navbar :autoBack="true" :safeAreaInsetTop="true" :placeholder="true" :fixed="true">
			<view slot="left" class="nav-left">
				<u-icon name="arrow-left" color="#000000" size="24" style="margin-right: 10rpx;"></u-icon>
				<u--image :showLoading="true" :src="workInfo.owner_detail.avatar" width="30px" height="30px" style="margin: 0 20rpx;"
					shape="circle"></u--image>
				<span class="name">{{workInfo.owner_name}}</span>
			</view>
		</u-navbar>
		<view class="swiper">
			<u-swiper :list="imags" @change="change" indicatorActiveColor="#E7CDB2" :radius="0" :height="450"
				indicatorMode="dot" imgMode="aspectFill" :indicator="true"></u-swiper>
		</view>
		<view class="work-info">
			<span>{{workInfo.name}}</span>
			<span v-html="workInfo.description"></span>
			<view class="tags">
				<span class="tag" v-for="item in workInfo.tag_name_list" :key="item">#{{item}}</span>
			</view>
			<span class="edit-time">更新于 {{workInfo.update_datetime}}</span>
		</view>

	</view>
</template>

<script>
	import {
		workDetailApi
	} from '@/api'
	export default {
		data() {
			return {
				workInfo: {}
			};
		},
		computed: {
			imags() {
				const address = this.workInfo.address
				if (address) {
					return address.split(',')
				}
				return []
			}
		},
		onShareAppMessage(opt) {
			let _this = this
			if (opt.from === 'button') {
				// 来自页面内转发按钮
				console.log(opt.target)
			}
			return {
				title: this.workInfo.name, //分享标题
				path: `/pages/gallery/subs/gallery-detail/gallery-detail?id=${this.workInfo.id}&name=${this.workInfo.name}`, //点击分享消息是打开的页面
				imageUrl: this.workInfo.cover, //图片路径
				success: function(res) {
					// 转发成功
					console.log("转发成功:" + JSON.stringify(res));
				},
				fail: function(err) {
					// 转发失败
					console.log("转发失败:" + JSON.stringify(err));
				}
			}
		},
		async onLoad({
			id
		}) {
			this.workInfo = await workDetailApi({
				id
			})
		},
		methods: {
			change(e) {},
			click(e) {},
		}
	}
</script>

<style lang="scss" scoped>
	.gallery-detail {
		.nav-left {
			display: flex;
			align-items: center;

			.name {
				font-size: 28rpx;
				margin-left: 15rpx;
				font-weight: 500;
			}
		}

		.work-info {
			padding: 40rpx;
			display: flex;
			flex-direction: column;

			&>span:first-of-type {
				font-size: 32rpx;
				font-weight: 600;
				color: #272727;
				margin-bottom: 20rpx;
			}

			&>span:nth-child(2) {
				font-size: 28rpx;
				color: #353535;
				line-height: 48rpx;
			}

			.tags {
				display: flex;
				gap: 20rpx;
				align-items: center;
				flex-wrap: wrap;
				color: #263951;
				font-size: 28rpx;
				margin-top: 15rpx;
			}

			.edit-time {
				margin-top: 50rpx;
				font-size: 24rpx;
				color: #c2c2c2;
			}
		}
	}
</style>
